<template>
  <div class="container">
    <el-card>
      <div>
        <div class="title">文字信息</div>
        <div class="textarea-wrap">
          <el-input
            style="width: 100%;height:100%"
            :rows="12"
            type="textarea"
            resize="none"
            placeholder="请输入内容"
            v-model="textarea1"
          ></el-input>
        </div>

        <div style="margin: 20px 0;"></div>
        <!-- 上传图片 -->

        <div class="title">上传图片/视频(必填)</div>
        
          <el-upload
            action="void"
            accept=".pdf"
            :http-request="customUpload"
            :on-remove="handleRemove"
            :on-progress="progressA"
            
            ref="upload"
            :auto-upload="true"
            :limit="1"
            :on-exceed="exceed"
            :show-file-list="false"
            :before-upload="beforePDFUpload"
          >
          <div class="upload-btn flex flex-col flex-center">
          <i class="el-icon-plus"></i>
          <span>上传图片/视频</span>
          <span>(jpg. png. mov. mp4)</span>
        </div>
        </el-upload>
          
        <!-- 添加产品 -->
        <div class="flex flex-col">
          <div class="title">添加产品<span>(非必选,最多可选择6个)</span>

          </div>
          <div>
            <el-select
              v-model="model"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

      </div>
    </el-card>
    <div class="footer-btn flex">
      <el-button style="width: 160px;height: 40px;">取消</el-button>
      <div class="flex-one"></div>
      <el-button
        type="primary"
        plain
        class="btn-style"
        @click="preview"
      >手机端预览</el-button>
      <el-button
        type="primary"
        plain
        class="btn-style"
      >保存草稿</el-button>
      <el-button
        type="primary"
        plain
        class="btn-style"
      >实时发布</el-button>
      <el-button
        type="primary"
        style="width: 160px;height: 40px;background: #015DFF;"
        @click="send"
      >发布</el-button>
      
    </div>
    <PreviewPop
      :isShow="isShow"
      :company="company"
    ></PreviewPop>
    <UploadImgPop
      :show="uploadPop"
      @confirmUpload="confirmUpload"
      @cancelUpload="cancelUpload"
    >
    </UploadImgPop>
  </div>
</template>

<script>
import PreviewPop from './components/PreviewPop'
import UploadImgPop from './components/UploadImgPop'
export default {
  components: {
    PreviewPop,
    UploadImgPop
  },
  data() {
    return {
      isShow:false,
      uploadPop: false,
      company: {},
      // fileList: [],
      textarea1: '',
      model: '',
      options: ['上海', '田径']
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    // 确认上传
    confirmUpload(){
      this.uploadPop = false
    },
    // 取消上传
    cancelUpload(){
      this.uploadPop = false
    },
    // 发布
    send(){
      this.uploadPop = true
    },
    // 预览手机端效果
    preview(){
      this.isShow = true
    },
    // 检验文件
    beforePDFUpload(file) {
      const isPDF = file.type === 'application/pdf'
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isPDF) {
        this.$message.error('上传文件只能是 PDF 格式!')
      }
      if (!isLt100M) {
        this.$message.error('上传PDF大小不能超过 100MB!')
      }
      return isPDF && isLt100M
    },
    // 上传文件
    customUpload(file) {
      let FormDatas = new FormData()
      this.fileName = file.file.name
      FormDatas.append('file', file.file)
      this.isUpload = true
      this.loading = true
      axios({
        url: 'http://114.55.105.176:7005/productfile/upLoadPDF',
        method: 'post',
        data: FormDatas,
        //上传进度
        onUploadProgress: progressEvent => {
          let num = ((progressEvent.loaded / progressEvent.total) * 100) | 0 //百分比
          file.onProgress({ percent: num }) //进度条
        }
      })
        .then(res => {
          this.file = res.data.data
          let newList = this.file.materialsIds.split(',')
          this.imgUrl = 'http://114.55.105.176:7000/temp/' + newList[0]
          this.isComplete = true
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          this.loading = false
          file.onSuccess() //上传成功(打钩的小图标)
        })
        .catch(() => {
          this.loading = false
          this.$message.error('上传失败!')
        })
    },
    /**     文件正在上传时的钩子    **/
    progressA(event, file) {
      this.percent = event.percent
    },
    exceed() {
      this.$message('不能上传更多')
    },
    /**     移除上传文件    **/
    handleRemove(file) {
      // this.$refs.upload.abort() //取消上传
      // this.$message({ message: '成功移除' + file.name, type: 'success' })
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  margin: 20px 39px;
}
.el-card {
  padding: 20px 351px 30px 327px;
  box-sizing: border-box;
}
.textarea-wrap {
  margin-bottom: 46px;
  width: 875px;
  height: 269px;
  border-radius: 8px;
  .el-textarea {
    .el-textarea__inner {
      height: 269px;
    }
  }

  // border: 1px solid #cccccc;
}
.title {
  margin-bottom: 20px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #666666;
  span {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(182, 182, 182, 0.5);
  }
}
.upload-btn {
  width: 210px;
  height: 210px;
  border-radius: 8px;
  border: 1px dashed #c3c3c3;
  margin-bottom: 28px;
  i {
    font-size: 50px;
    margin-top: 51px;
    margin-bottom: 23px;
  }
  span {
    margin-bottom: 8px;
  }
}
.el-select {
  width: 350px;
}
.footer-btn {
  margin-top: 20px;
  padding: 0 45px;
  box-sizing: border-box;
}
.btn-style {
  width: 160px;
  height: 40px;
  background: #fff;
}
</style>